import QtQuick 2.12
import QtQuick
import QtQuick.Controls

Window {
    id:root
    width: 1200
    height: width/9*6
    visible: true
    title: qsTr("模型和视图")

    Column{

        Rectangle {
             width: 200; height: 100
            //数据集
            ListModel {
                id: fruitModel
                property string language: "en"
                ListElement {
                    name: "Apple"
                    cost: 2.45
                }
                ListElement {
                    name: "Orange"
                    cost: 3.25
                }
                ListElement {
                    name: "Banana"
                    cost: 1.95
                }
                ListElement {
                    name: "Banana"
                    cost: 1.95
                }
                ListElement {
                    name: "Banana"
                    cost: 1.95
                }
                ListElement {
                    name: "Banana"
                    cost: 1.95
                }
            }
            //展示效果
            Component {
                id: fruitDelegate
                Row {
                    id: fruit
                    required property string name
                    required property real cost
                    Text {
                        text: " Fruit: " + fruit.name
                        color: fruit.ListView.view.fruit_color//获取listview 的颜色
                    }
                    Text {
                        text: " Cost: $" + fruit.cost
                    }
                    Text {
                        text: " Language: " + fruit.ListView.view.model.language//获取模型定义的属性
                    }
                }
            }

            ListView {
                property color fruit_color: "green"
                model: fruitModel
                delegate: fruitDelegate
                anchors.fill: parent
            }
        }
        Item {
            width: 200
            height: 100

            ListModel {
                id: myModel
                ListElement { type: "Dog"; age: 8; noise: "meow" }
                ListElement { type: "Cat"; age: 5; noise: "woof" }
            }

            component MyDelegate : Text {
                required property string type
                required property int age
                text: type + ", " + age
                // WRONG: Component.onCompleted: () => console.log(noise)
                // The above line would cause a ReferenceError
                // as there is no required property noise,
                // and the presence of the required properties prevents
                // noise from being injected into the scope
            }

            ListView {
                anchors.fill: parent
                model: myModel
                delegate: MyDelegate {}
            }
        }
        Item {
            width: 200; height: 100
            ListModel {
                id: myModel2
                ListElement { type: "Dog"; age: 8 }
                ListElement { type: "Cat"; age: 5 }
                ListElement { type: "Cat"; age: 5 }
                ListElement { type: "Cat"; age: 5 }
            }
            Component {
                id: myDelegate2
                Text { text: type + ", " + age }
            }
            ListView {
                anchors.fill: parent
                model: myModel2
                delegate: myDelegate2
            }
        }
        //手动添加
        Item {
            width: 200; height: 100
            ListModel {
                id: fruitModel3
            }
            ListView {
                anchors.fill: parent
                model: fruitModel3
                delegate: Row{
                    id: delegate
                    required property string name
                    required property real cost

                    Text { text: "Fruit: " + delegate.name }
                    Text { text: "Cost: $" + delegate.cost }
                }
            }
            //点击
            MouseArea{
                anchors.fill: parent
                onClicked: fruitModel3.append({"cost": 5.95, "name":"Pizza"})
            }
        }
        //数字模型
        Item{
             width: 200; height: 100
            Component {
               id: itemDelegate
               Text {
                   required property int index
                   text: "I am item number: " + index
               }
           }
           ListView {
               anchors.fill: parent
               model: 5
               delegate: itemDelegate
           }
        }
        //对象实例作为模型
        Rectangle {
            width: 100; height: 100

            Text {
                id: myText
                text: "Hello"
                color: "#dd44ee"
            }

            Component {
                id: myDelegate

                Text {
                    required property var model
                    text: model.color
                }
            }

            ListView {
                anchors.fill: parent
                anchors.topMargin: 30
                model: myText
                delegate: myDelegate
            }
        }
        Rectangle {
            width: 100; height: 100
            color: "red"
            ListView {
                anchors.fill: parent
                model: modelCpp  // 自动从上下文获取
                delegate: Rectangle {
                    required property string modelData
                    height: 25
                    width: 100
                    Text { text: parent.modelData}
                }
            }
        }
    }

}
